<template>
  <div class="box p10">
    <div class="bg-white p10">
        <div class="mb10 level">
          <div class="left">
            <el-input type="text" size="small" placeholder="菜单标题"></el-input>
          </div>
          <div class="left ml10">
            <el-button type="primary" size="small" @click="loadMenuData" icon="el-icon-search">搜索</el-button>
          </div>
          <div class="right">
            <el-button type="primary" @click="save" size="small">新增</el-button>
            <el-button type="danger" size="small">禁用</el-button>
            <el-button type="danger" size="small">重置密码</el-button>
          </div>
        </div>
        <el-table
            :data="menu"
            border
            size="small"
            style="width: 100%">
          <el-table-column
              prop="title"
              label="日期"
              width="180">
          </el-table-column>
          <el-table-column
              prop="name"
              label="姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址">
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import {onMounted, reactive} from 'vue'
import {loadMenu} from '@/libs/request/api'
export default {
  name: "SysMenu",
  data(){
    return {
      menu:[
        {title:'张建智'}
      ]
    }
  },
  setup(){
    const  dataSoure = reactive({
       menuDataSoure:[]
    })
    const  loadMenuData = async ()=>{
      const  search = {
        current:0,
        size:10
      }
      loadMenu(JSON.stringify(search)).then(res=>{
        console.log(res.data.records)
        dataSoure.menuDataSoure = res.data.records
      }).catch(err=>{
        console.log(err);
      })
    }
    onMounted(()=>{
      //loadMenuData()
    })
    return {
      load:true,
      loadMenuData,
      dataSoure
    }
  }
}
</script>

<style scoped>

</style>
